<template>
	<view class="container" :data-theme="theme">
		<view class="header">
			<!-- 头部帮助 -->
			<view class="header-help">
				<view class="help-left">
					超出数量仓库可能无法返还，请及时清理
				</view>
				<view class="help-right">
					帮助 <uni-icons type="help"></uni-icons>
				</view>
			</view>
			<!-- 头部导航 -->
			<view class="header-nav">
				<uni-segmented-control :current="navIndex" :values="navList" styleType="text" :activeColor="bgColor"
					@clickItem="clickNavIndex"></uni-segmented-control>
			</view>
			<!-- 头部搜索 -->
			<view class="header-select">
				<view style="display: flex;flex-flow: row;margin-right: 20rpx;">
					<picker @change="frameUpChange" @cancel="frameUpCancel" @click="frameUpClick" :value="frameUpIndex"
						:range="frameUpList" range-key="name" style="display: flex;" :color="bgColor">
						<view style="display: flex;">

							<view style="font-size: 14px;margin-right: 6rpx;" v-if="isisShowFrameUp">
								04月18日
							</view>
							<view style="font-size: 14px;margin-right: 6rpx;" v-else="isisShowFrameUp">
								{{ frameUpList[frameUpIndex].name.slice(0,6) }}
							</view>
							<u-icon :name="isShowFrameUpShow ? 'arrow-down-fill' : 'arrow-up-fill'" size="12"></u-icon>
						</view>
					</picker>
				</view>
				<view style="display: flex;flex-flow: row;margin-right: 20rpx;">
					<picker @change="warehouseChange" @cancel="warehouseCancel" @click="warehouseClick"
						:value="warehouseIndex" :range="warehouseList" range-key="depotName" style="display: flex;">
						<view style="display: flex;">
							<view style="font-size: 14px;margin-right: 6rpx;" v-if="isWarehouse">仓库选择
							</view>
							<view style="font-size: 14px;margin-right: 6rpx;" v-else='isWarehouse'>
								{{ warehouseList[warehouseIndex].depotName }}
							</view>
							<u-icon :name="warehouseShow ? 'arrow-down-fill' : 'arrow-up-fill'" size="12"></u-icon>
						</view>
					</picker>

				</view>
			</view>
			<!-- 头部装筐方式 -->
			<view class="header-methods">
				<view class="methods-left">
					<view> <span style="color: #e1dfe1;margin-right: 10rpx;"> 装筐方式 </span> <span><uni-icons
								color="#e1dfe1" type="help">
							</uni-icons> </span> <span> {{scanMethod ? ' 按品输入' : ' 逐件扫码'}} </span> </view>
				</view>
				<view class="methods-right" @click="clickSwitchMethod">
					{{scanMethod ? '切换至逐件扫码' : '切换至按品输入'}}

				</view>
			</view>
			<!-- 装筐数量 -->
			<view class="frame-up-status">
				<view class="status-left" v-for="(item,index) in frameUpStatus" :key="index">
					<view>{{item}}32</view>
				</view>
				<view class="status-right">
					<uni-icons type="help"></uni-icons>
				</view>
			</view>
		</view>
		<view class="content">
			<!-- 这里是可滚动的内容 -->
			<scroll-view class="scroll-view" scroll-y>
				<view class="scroll-view-inner">

				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import {
		setThemeColor
	} from '../../utils/setTheme';
	import {
		queryDepotInformationApi
	} from "@/api/qualityTest.js"
	let app = getApp()
	export default {
		data() {
			return {
				bgColor: "#fff",
				theme: app.globalData.theme,
				// 导航下标
				navIndex: 0,
				// 导航列表
				navList: ["待装筐", '已装筐', '挂点结果'],
				// -------------------验收搜索----------------------
				isisShowFrameUp: true, // 验收方式展示
				frameUpIndex: 0, // 验收索引值
				frameUpList: [{ // 验收列表
					name: "04月18日 配送",
					value: "1"
				}, {
					name: "04月19日 配送",
					value: "2"
				}],
				isShowFrameUpShow: true, // 验收列表显示
				// ---------------------仓库搜索----------------------------
				isWarehouse: true, // 仓库方式展示
				warehouseIndex: 0, // 验收索引值
				warehouseList: [], // 仓库信息
				warehouseShow: true, // 验收列表显示
				// -------------------扫描方式---------------------
				// 扫面方式状态
				scanMethod: true,
				// -------------------装筐状态---------------
				// 装筐状态
				frameUpStatus: ["应送货", '已装筐', '待装筐', '超量'],

			}
		},
		onLoad(options) {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.initData()
		},
		methods: {
			// 初始化数据
			initData() {
				this.getQueryDepotInformation()
			},
			// 点击导航事件
			clickNavIndex(e) {
				this.navIndex = e.currentIndex
			},
			// -------------------关于搜索仓库事件------------------------------
			// 仓库搜索事件
			warehouseChange(e) {
				// this.params.current = 1
				this.isWarehouse = false
				this.warehouseIndex = e.detail.value
				this.warehouseShow = true
				// this.params.depotId = this.warehouseList[this.warehouseIndex].depotId
				// this.qualityTestList = []
				// this.getQualityTestList()
			},
			// 仓库取消事件
			warehouseCancel() {
				this.warehouseShow = true
			},
			// 仓库点击事件
			warehouseClick() {
				this.warehouseShow = false
			},
			// ---------------------关于待装筐搜索日期事件------------------------------
			// 待装筐搜索事件
			frameUpChange(e) {
				// this.params.current = 1
				this.isisShowFrameUp = false
				this.frameUpIndex = e.detail.value
				this.isShowFrameUpShow = true
				// this.params.acceptance = this.frameUpList[this.frameUpIndex].value
				// this.qualityTestList = []
				// this.getQualityTestList()
			},
			// 待装筐取消事件
			frameUpCancel() {
				this.isShowFrameUpShow = true
			},
			// 待装筐点击事件
			frameUpClick() {
				this.isShowFrameUpShow = false
			},
			// -------------------扫码方式-------------------
			clickSwitchMethod() {
				this.scanMethod = !this.scanMethod
			},
			// 获取仓库列表
			async getQueryDepotInformation() {
				try {
					let result = await queryDepotInformationApi()

					this.warehouseList = result.data.list
					this.warehouseList.unshift({
						depotId: -1,
						depotName: '全部'
					})
				} catch (e) {
					//TODO handle the exception
					this.$util.Tips({
						title: e
					})
					console.log(e)
				}
			},
		}
	}
</script>
<style lang="scss">
	page {
		height: 100%;


	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.header {

		// -----------------头部警告帮助----------------
		.header-help {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			background-color: #fff4f3;

			.help-left {
				color: #ec745f;
			}

			.help-right {
				display: flex;
				align-items: center;
			}
		}

		// ----------------头部导航-------------------
		.header-nav {
			background-color: white;
		}

		// -------------------头部搜索--------------------
		.header-select {
			display: flex;
			align-items: center;
			padding: 20rpx;
			background-color: white;
		}

		// ---------------------头部装筐扫描方式----------------------
		.header-methods {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			background-color: white;

			.methods-right {
				@include main_color(theme)
			}
		}

		// ----------------------头部装筐状态----------------------
		.frame-up-status {
			display: flex;
			justify-content: space-around;
			
			padding: 20rpx;

			.status-left {
				font-weight: bold;
			}
		}

	}

	.content {
		flex: 1;
		overflow: hidden;
	}

	.scroll-view {
		height: 100%;
	}

	.scroll-view-inner {}
</style>